<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面布局</title>
		<link rel="stylesheet" href="layui/css/layui.css">
	</head>
	
	<style>
		.news{
			margin: 20px auto;
			position: relative;
		}
		.colorH{
			height: 400px;
		}
		.colorLeft{
			margin-left: 20px;
		}
		.colorTop{
			margin-top: 20px;
		}
		/* 当屏幕小于575px 使用以下样式 等级xs */
		@media (max-width:575px) {
			.news{
				width: 100%;
			}
			.color1{
				position: absolute;
				top: 100px;
			}
		}
		/* sm */
		@media (min-width:576px) and (max-width:767px) {
			.news{
				width: 100px;
			}
			.color1{
				margin-top: 800px;
			}
		}
		/* md */
		@media (min-width:768px) and (max-width:991px) {
			.news{
				width: 768px;
			}
		}
	</style>
	
	<body>
		<!-- 模拟腾讯官网 -->
		<div class="layui-row news">
			<!-- 第一列 -->
			<div class="layui-col-xs12 layui-col-sm8 layui-col-md8">
				<div class="colorH colorTop" style="background-color: aqua;"></div>
			</div>
			<div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
				<div class="color1 colorH colorLeft colorTop" style="background-color: chartreuse;"></div>
			</div>
			<!-- 第二列 -->
				<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
					<div class="colorH colorLeft colorTop" style="background-color: deepskyblue;"></div>
				</div>
				<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
					<div class="colorH colorLeft colorTop" style="background-color: aqua;"></div>
				</div>
				<div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
					<div class="colorH colorLeft colorTop" style="background-color: blueviolet;"></div>
				</div>
			<!-- 第三列 -->
			<div class="layui-col-xs12 layui-col-sm8 layui-col-md8">
				<div class="colorH colorTop" style="background-color: aqua;"></div>
			</div>
			<div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
				<div class="color1 colorH colorLeft colorTop" style="background-color: chartreuse;"></div>
			</div>
			<!-- 第四列 -->
				<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
					<div class="colorH colorLeft colorTop" style="background-color: deepskyblue;"></div>
				</div>
				<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
					<div class="colorH colorLeft colorTop" style="background-color: aqua;"></div>
				</div>
				<div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
					<div class="colorH colorLeft colorTop" style="background-color: blueviolet;"></div>
				</div>
		</div>
	</body>

	<script src="layui/layui.js"></script>
</html>